<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .list{display: none;}
  </style>
</head>
<body>
  <input type="button" class="btn" value="按钮">
  <ul class="list">
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
    <li>link4</li>
    <li>link5</li>
  </ul>
</body>
<script>

  var btn = document.querySelector(".btn")
  var list = document.querySelector(".list")

  var state = 0;

  btn.onclick = function(eve){
    // 阻止按钮的事件冒泡
    eve.stopPropagation();

    if(state === 0){
      list.style.display = "block"
      state = 1;
    }else{
      list.style.display = "none"
      state = 0;
    }
    
  }

  document.onclick = function(){
    list.style.display = "none"
    state = 0;
  }
  
</script>
</html>